<template>
    <div class="Wedit">
      <Toolbar
        style="border: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="'default'" />
      <Editor
        style="height: 400px; overflow-y: hidden;border: 1px solid #ccc;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="'default'"
        @onCreated="handleCreated" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive,onMounted,onBeforeUnmount,computed,shallowRef } from "vue";
  import "@wangeditor/editor/dist/css/style.css";
  import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
  import { createEditor, DomEditor, IToolbarConfig } from "@wangeditor/editor";
  const props = defineProps({
    html_text: {
      type: String,
      required: false,
      default: "<p>hello</p>",
    },
  });
  //
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef();
  
  // 内容 HTML
  const valueHtml = computed({
    get() {
      // 这里返回的值是获取计算属性的值
      return props.html_text;
    },
    set(newValue) {},
  });
  onMounted(() => {});
  // 工具栏配置
  const toolbarConfig = reactive({
    toolbarKeys: [
    // 一些常用的菜单 key
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'uploadVideo',//上传视频
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ]
  });
  const editorConfig = { placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage:{
        server: "后台的请求地址"
    }
  } 
 };
  
  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
  });
  
  const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
  };
  </script>
  <style scoped></style>
  